<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./common.css">
    <script src="https://cdn.jsdelivr.net/npm/gsap@latest"></script>

</head>

<body class="p24">
    <div class="title txt_center">Exploring </div>
    <div class="search flex_x start">
        <img src="./static/image/2.svg" alt="">
        <input type="text" placeholder="Search">
    </div>
    <div class="s flex_x between">
        <div class="s_content flex_x between"> <span>Nomad score</span> <img src="./static/image/down.svg" alt=""></div>
        <img class="s_im" src="./static/image/筛选 1.png" alt="">
    </div>
    <div class="list">
      <a href="./ExploringDetail.html">
        <div class="list_item_img mt_20 pos_r">
            <img src="./static/image/Rectangle 8.png" alt="">
            <div class="mask pos_a flex_y between">
                <div class="tops flex_x between border_box pd6">
                    <div class="left flex_x start">
                        <img class="mr_6" src="./static/image/🦆 icon _sun light_.png" alt="">
                        <span>31℃</span>
                    </div>
                    <div class="right">4.0</div>
                </div>
                <div>
                    <div class="center txt_center">Kuala Lumpur</div>
                    <div class="desc txt_center">Malaysia</div>
                </div>
                <div class="bottomt flex_x end pd6">
                    <img src="./static/image/r.svg" alt="">
                    <span class="f_6">1,1300 month</span>
                </div>
            </div>
        </div>
      </a>
        <div class="list_item_img mt_20 pos_r">
            <img src="./static/image/Rectangle 8.png" alt="">
            <div class="mask pos_a flex_y between">
                <div class="tops flex_x between border_box pd6">
                    <div class="left flex_x start">
                        <img class="mr_6" src="./static/image/🦆 icon _sun light_.png" alt="">
                        <span>31℃</span>
                    </div>
                    <div class="right">4.0</div>
                </div>
                <div>
                    <div class="center txt_center">Kuala Lumpur</div>
                    <div class="desc txt_center">Malaysia</div>
                </div>
                <div class="bottomt flex_x end pd6">
                    <img src="./static/image/r.svg" alt="">
                    <span class="f_6">1,1300 month</span>
                </div>
            </div>
        </div>
        <div class="list_item_img mt_20 pos_r">
            <img src="./static/image/Rectangle 8.png" alt="">
            <div class="mask pos_a flex_y between">
                <div class="tops flex_x between border_box pd6">
                    <div class="left flex_x start">
                        <img class="mr_6" src="./static/image/🦆 icon _sun light_.png" alt="">
                        <span>31℃</span>
                    </div>
                    <div class="right">4.0</div>
                </div>
                <div>
                    <div class="center txt_center">Kuala Lumpur</div>
                    <div class="desc txt_center">Malaysia</div>
                </div>
                <div class="bottomt flex_x end pd6">
                    <img src="./static/image/r.svg" alt="">
                    <span class="f_6">1,1300 month</span>
                </div>
            </div>
        </div>
        <div class="list_item_img mt_20 pos_r">
            <img src="./static/image/Rectangle 8.png" alt="">
            <div class="mask pos_a flex_y between">
                <div class="tops flex_x between border_box pd6">
                    <div class="left flex_x start">
                        <img class="mr_6" src="./static/image/🦆 icon _sun light_.png" alt="">
                        <span>31℃</span>
                    </div>
                    <div class="right">4.0</div>
                </div>
                <div>
                    <div class="center txt_center">Kuala Lumpur</div>
                    <div class="desc txt_center">Malaysia</div>
                </div>
                <div class="bottomt flex_x end pd6">
                    <img src="./static/image/r.svg" alt="">
                    <span class="f_6">1,1300 month</span>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom flex_x around bg_ff ">
        <a href="./home.html"><img src="./static/image/3.png" alt=""></a>
        <img src="./static/image/4.png" style="width: 25px;height: 32px;" alt="">
        <a href="./mine.html"><img src="./static/image/Vector (3).svg" alt=""></a>
    </div>
</body>
<script>
    gsap.from(".search  img", {
        duration: .5,
        y: 100,
        x:100
    });
     
    gsap.from(".s_content img", {
        duration: .5,
        y: 0,
        x:100
    });
  
</script>
<style>
    .list_item_img .bottomt img {
        width: 14.09px;
        height: 8.544px;
    }
    .f_6{
        font-size: 8px;
        color: #fff;
    }

   

    .center {
        color: #FFF;
        font-size: 18px;
        font-weight: bold;
    }

    .desc {
        color: #FFF;
        font-size: 12px;
        margin-top: 8px;
    }

    .tops {
        color: rgba(255, 255, 255, .5);
        font-size: 10px;

    }

    .tops img {
        width: 15px;
        height: 15px;
        vertical-align: middle;
    }

    .list_item_img {
        width: 100%;
        height: 171.46px;
    }

    .list_item_img img {
        width: 100%;
        height: 100%;
        border-radius: 15px;

    }

    .mask {
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.60);
        border-radius: 15px;
    }

    .s {

        color: #C2C2C2;
        font-size: 15px;
        font-weight: 300;
    }

    .s_im {
        width: 25px;
        height: 25px;
    }

    .s_content {
        width: 185px;
        height: 32px;
        line-height: 32px;
        padding: 0 12px;
        box-sizing: border-box;
        border-radius: var(--spacing-2, 8px);
        background: #FFF;
        align-items: center;
    }

    .search {
        width: 338px;
        height: 46px;
        border-radius: 40px;
        background: #FFF;
        margin: 20px auto;
        align-items: center;
        padding: 0 12px;
        box-sizing: border-box;
    }

    .search img {
        width: 14px;
        height: 14px;
    }

    .search input {
        width: 80%;
        height: 100%;
        border: none;
        background: none;
    }
</style>

</html>